<template>
  <div class="home">
    <el-carousel :interval="4000" type="card" height="350px">
      <el-carousel-item v-for="item in carouselImages" :key="item.id">
        <img  :src="item.view" />
      </el-carousel-item>
    </el-carousel>

    <div class="tab3">
      <el-row>
        <el-divider><span>日子有光</span></el-divider>
      </el-row>
      <el-row>
        <el-col v-for="(fit,index) in fits" :key="index" :span="4">
          <div class="block pai">
            <el-image style="width:95%; height:95%" :src="fit.url" ></el-image>
            <div class="demonstration">{{ fit.name }}</div>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row style="width:90%;margin:0 auto">
        <el-col v-for="(bigimg,index) in bigImgs" :key="index" :span="12" style="margin-bottom:28px">
          <a href="" @click.prevent="gotheme(bigimg.router)">
          <div class="block">
            <el-image :src="bigimg.url" style="width: 96%; height: 100%"></el-image>
            <div class="black"><span>{{bigimg.name}}</span></div>
          </div></a>
        </el-col>
      </el-row>
      <el-divider><span>人间美好</span></el-divider>
      <el-row style="width:90%;margin:53px auto" :gutter='10'>
        <el-col v-for="(img,index) in smallImgs" :key="index" :span="6" style="text-align:center;box-sizing:border-box;margin-top:10px">
          <a href="#" @click="goDetail(img.router,img.id)" style="color:#666;text-decoration:none"  >
           <div class="block fox">
            <img :src="img.url" style="width: 100%; height: 100%"></img>
            <div class="demonstration">{{ img.name }}</div>
            <!-- <div class="mores"><span class="more">查看更多信息</span></div> -->
          </div></a>
        </el-col>
      </el-row>
     
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      carouselImages: [
        { id: 0, view: require("../assets/everyday.png") },
        { id: 1, view: require("../assets/group.png") },
        { id: 2, view: require("../assets/lb.png") }
      ],
      fits: [
        { name: "同一天", url: require("../assets/sameday.jpg") },
        { name: "须臾", url: require("../assets/sympathy.jpg") },
        { name: "最好的祝福", url: require("../assets/wonderful-wishes.jpg") },
        { name: "热烈的爱", url: require("../assets/blooming-love.jpg") },
        { name: "是植物呀", url: require("../assets/plants.jpg") },
        { name: "因为所以", url: require("../assets/justbecuase.jpg") }
      ],
      bigImgs:[
        {router:"/index/festival",name:"节日套餐", url:require("../assets/halloween.jpg")},
        {router:"/index/flower",name:"最好的祝福", url:require("../assets/bestsellers.jpg")},
        {router:"/index/commercial",name:"商务套餐", url:require("../assets/introduct.png")},
        {router:"/index/day",name:"七日花", url:require("../assets/fallflowers.jpg")},
      ],
      smallImgs:[
        {router:"/index/ortherDetail",id:"1016",name:"圆满",url:require("../assets/redrose.jpg")},
        {router:"/index/ortherDetail",id:"1007",name:"留住好时光",url:require("../assets/birthday.jpg")},
        {router:"/index/ortherDetail",id:"1015",name:"邂逅你的美",url:require("../assets/fallrose.jpg")},
        {router:"/index/ortherDetail",id:"1010",name:"如初时光",url:require("../assets/harvest.jpg")},
        {router:"/index/ortherDetail",id:"1017",name:"月光女神",url:require("../assets/scoperose.jpg")},
        {router:"/index/ortherDetail",id:"1014",name:"夏日色彩",url:require("../assets/farmhouse.jpg")},
        {router:"/index/ortherDetail",id:"1004",name:"枫丹白露",url:require("../assets/rose.jpg")},
        {router:"/index/ortherDetail",id:"1020",name:"天使之吻",url:require("../assets/fox.jpg")},
      ]
    };
  },
  methods:{
    gotheme(router){
      this.$router.push(router)
    },
    goDetail(router,id){
      this.$store.state.productId=id
      console.log(id)
      this.$router.push(router)
    }
  }


};
</script>
<style lang="css">
.home .el-col:hover .pai>.el-image>img{
    transition: 0.8s;
    transform: scale(1.1,1.1);
  }
.home .el-col:hover .fox>.mores>.more{
  display: block
}
.fox::before{
  content: '查看更多信息';
  background-color: rgba(255, 255, 255, 0.9);
  display: inline-block;
  width:100%;
  height: 340px;
  line-height: 340px;
  position: absolute;
  font-size: 20px;
  top:0;
  display: none;
}
.home .el-col:hover .fox::before{
 display: block;
 
}
.home{
  font-family: "楷体"
}

</style>
<style lang="css"  scoped>
.el-divider span{
  font-size: 27px;
  letter-spacing: 14px;
}
.home .block>.el-image{
     overflow: hidden;
}

.block{
  position: relative;
  }
.fox{
      width:95%;
  box-sizing: border-box
  }
.black span{
  display: inline-block;
  width:96%;
  height: 50px;
  line-height: 50px;
  color:#fff;
  font-size:18px;
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  bottom:1%;
  left: 50%;
  margin-left:-48%;
}
.demonstration{
  font-size: 18px;
  letter-spacing: 2px;
}

</style>
